<template>
  <div class="h-p100 w-p100">
    <div class="box box-ver w-p100 h-p100">
      <div @click="$router.go(-1)"  class="header box box-ac">
        <div class="icon icon-back"></div>
        <div class="box-f1 tx-c">我的驾照</div>
      </div>
      <div class="box-f1 bc-fff of-y-s">
        <div v-if="userInfo.vip" class="card">
          <div class="box">
            类别：{{level}}
          </div>
          <div>
          生效时间：{{activationDate}}
          </div>
          <div>
          到期时间：{{expireDate}}
          </div>
          <div class="box">
            NO：{{userInfo.vip._id}}
          </div>
        </div>
        <div class="desc">
          <div class="title">说明</div>
          <div>1.无驾照每天只能看两部电影；</div>
          <div>2.有驾照每天可无限量看，并拥有收藏功能，爱看的电影随时收藏；</div>
          <div>
            3.驾照可在
            <span @click="$router.push('/vipGet')" class="tc-main">【我的-获取驾照】</span>
            里面联系相应人员获取激活码来
            <span @click="$router.push('/vipActivation')" class="tc-main">【激活驾照】</span>；
          </div>
          <div>4.驾照有过期时间，到期需重新获取；</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import moment from 'moment'
export default {
  name: 'myVip',
  data () {
    return {
      config: {
        '1': 'A1',
        '2': 'B1',
        '3': 'C1'
      }
    }
  },
  computed: {
    ...mapState(['userInfo']),
    level () {
      if (!this.userInfo.vip) return ''
      return this.config[this.userInfo.vip.type + '']
    },
    activationDate () {
      if (!this.userInfo.vip) return ''
      return moment(this.userInfo.vip.activationDate).format('YYYY-MM-DD HH:ss')
    },
    expireDate () {
      if (!this.userInfo.vip) return ''
      return moment(this.userInfo.vip.expireDate).format('YYYY-MM-DD HH:ss')
    }
  },
  mounted () {
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/css/config.scss';
.card{
  width:5.4rem;
  margin:.5rem auto;
  padding:.3rem;
  font-size:.32rem;
  line-height:.6rem;
  border-radius:.3rem;
  border:1px solid #FFFF00;
  color:#FFFF00;
  background-color:#333;
}
.desc{
  font-size:.32rem;
  padding:0 .9rem;
  line-height:.6rem;
  .title{
    font-size:.36rem;
    padding-top:.3rem;
  }
}
</style>
